.spacers(@i) {
  @space: @i * 8;
  @space-px: @{space}px !important;

  .ma-@{i} {
    margin: @space-px;
  }

  .mt-@{i} {
    margin-top: @space-px;
  }

  .mr-@{i} {
    margin-right: @space-px;
  }

  .mb-@{i} {
    margin-bottom: @space-px;
  }

  .ml-@{i} {
    margin-left: @space-px;
  }

  .my-@{i} {
    margin-top: @space-px;
    margin-bottom: @space-px;
  }

  .mx-@{i} {
    margin-left: @space-px;
    margin-right: @space-px;
  }

  .pa-@{i} {
    padding: @space-px;
  }

  .pt-@{i} {
    padding-top: @space-px;
  }

  .pr-@{i} {
    padding-right: @space-px;
  }

  .pb-@{i} {
    padding-bottom: @space-px;
  }

  .pl-@{i} {
    padding-left: @space-px;
  }

  .py-@{i} {
    padding-top: @space-px;
    padding-bottom: @space-px;
  }

  .px-@{i} {
    padding-left: @space-px;
    padding-right: @space-px;
  }
}

.loop(@i) when (@i < 5) {
  .spacers(@i);
  .loop(@i + 1);
}

.loop(0);
